<template>
  <div class="name-container">
    <div class="card">
      <div class="card-header">Contact</div>
      <div class="card-body">
        <span>
          <svg-icon icon-class="mystar" class="svg"></svg-icon>
          夏目贵志</span>
        <span>
          <svg-icon icon-class="mymessage" class="svg"></svg-icon>
          ねごせんせい@126.com</span>
        <span>
          <svg-icon icon-class="myphone" class="svg"></svg-icon>
          200807-201704</span>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
  .name-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 400px;
    filter: drop-shadow(-2px 2px 8px rgba(50, 50, 0, 0.8));

    .card {
      transform: translateY(15%);
      clip-path: inset(0 0 71% 0);
      transition: 1s ease;
      .card-header {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 400px;
        height: 100px;
        background: rgba(0, 88, 255, 0.9);
        font-size: 2em;
        color: #fff;
        clip-path: inset(0 19% 0 19%);
        transition: 1s ease;
      }

      .card-body {
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        box-sizing: border-box;
        width: 400px;
        height: 240px;
        font-size: 1.4em;
        background: #fff;
        padding-left: 15px;
        clip-path: inset(0 19% 0 19%);
        transition: 1s ease;

        span {
          width: 100%;
          height: 100%;
          line-height: 80px;
          opacity: 0;
          transform: translateY(100%);
          transition: 1s ease;
          @for $i from 1 through 3 {
            &:nth-child(#{$i}) {
              transition-delay: $i * 0.1s;
            }
          }
        }

        .svg {
          display: inline-block;
        }
      }
      &:hover {
        transform: translateY(0);
        clip-path: inset(0 0 0 0);
        .card-header {
          clip-path: inset(0 0 0 0);
        }
        .card-body {
          clip-path: inset(0 0 0 0);
          span {
            opacity: 1;
            transform: translateY(0);
          }
        }
      }
    }
  }
</style>
